<template>
	<view class="item-list">
		<view class="item" v-for="(item,index) in items" :key="index" @click="gotoCourse(item.course.id)">
			<view class="cover">
				<u-image :src="item.course.cover|thumbCover" width="240" height="134" border-radius="10"></u-image>
			</view>
			<view class="info">
				<view class="title u-line-1">{{ item.course.title }}</view>
				<view class="meta">
					<text class="duration">课时：{{ item.course.lesson_count }}</text>
					<text class="progress">评分：{{ item.course.rating }}</text>
				</view>
				<view class="meta">
					<text class="progress">进度：{{ item.progress }}%</text>
					<text class="duration">用时：{{ item.duration|formatDuration }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  name: 'UserCourseList',
  props: {
    items: {
      type: Array
    }
  },
  data() {
    return {
      courses: []
    }
  },
  created() {
    this.courses = this.handleCourses(this.items)
  },
  watch: {
    items: function() {
      this.courses = this.handleCourses(this.items)
    }
  },
  methods: {
    gotoCourse(id) {
      this.$utils.redirect('/pages/course/info', {
        id: id
      })
    },
    handleCourses(items) {
      return items.map(item => {
        item.key = item.course.id + '-' + item.plan_id
        return item
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  padding: 10rpx 0;
}

.item .cover {
  width: 240rpx;
  height: 134rpx;
  margin-right: 15rpx;
}

.item .info {
  flex: 1;
}

.info .title {
  width: 465rpx;
  color: $u-main-color;
  margin-bottom: 10rpx;
}

.info .meta {
  color: $u-tips-color;
  margin-bottom: 10rpx;
}

.meta text {
  margin-right: 15rpx;
}
</style>
